<template>
  <div>
    <el-card>
      <div slot="header"
        :class="$style.header">
        <div :class="$style.search">
          <span>用户名：</span>
          <el-input v-model="name"
            placeholder="请输入"
            clearable
            @clear="filterChange" />
        </div>
        <div :class="$style.search">
          <span>订单号：</span>
          <el-input v-model="order"
            placeholder="请输入"
            clearable
            @clear="filterChange" />
        </div>
        <div>
          <span>状态：</span>
          <el-select v-model="value"
            placeholder="请选择">
            <el-option v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value" />
          </el-select>
        </div>
        <el-button type="primary"
          @click="filterChange">
          搜索<i class="el-icon-search"></i>
        </el-button>
      </div>
      <el-table :data="tabelDtata">
        <el-table-column label="用户名">
          <template slot-scope="{row}">
            {{row.member_id}}
          </template>
        </el-table-column>

        <el-table-column label="订单号"
          align="center">
          <template slot-scope="{row}">
            {{row.order_id}}
          </template>
        </el-table-column>

        <el-table-column label="金额"
          align="center">
          <template slot-scope="{row}">
            {{(parseFloat(row.amount)).toFixed(2)}}
          </template>
        </el-table-column>

        <el-table-column label="到期时间"
          align="center">
          <template slot-scope="{row}">
            {{row.expiretime}}
          </template>
        </el-table-column>

        <el-table-column label="状态"
          align="center">
          <template slot-scope="{row}">
            {{state(row.status)}}
          </template>
        </el-table-column>

        <el-table-column label="备注"
          align="center">
          <template slot-scope="{row}">
            {{row.remark}}
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: '',
      order:'',
      value:'',
      options:[
        {label:'全部',value:0},
        {label:'不是会员',value:1},
        {label:'普通会员',value:2},
        {label:'超级会员',value:3}
      ],
      tabelDtata: [
        {
          laber:'用户名',
          prop:'member_id',
        },
        {
          laber:'订单号',
          prop:'order_id',
        },
        {
          laber:'金额',
          prop:'amount',
        },
        {
          laber:'到期时间',
          prop:'expiretime',
        },
        {
          laber:'状态',
          prop:'status',
        },
        {
          laber:'备注',
          prop:'remark',
        },
      ]
    }
  },
  created(){
    this.getData();
  },
  methods: {
    filterChange() {
       this.nowPage === 1 ? this.getData() : (this.nowPage = 1)
    },
    getData(){
      this.$http.get('/Manage/Reward_bill/lists',{
        params:{
          page:1,
          rows:10,
          member_id:this.order,
          member:this.name,
          state:this.value
        }
      })
      .then(res=>{
        if(res.code === 1){
          this.tabelDtata = res.data.list;
        }
      })
    },
    state(type) {
      if (type === 1) {
        return '普通会员'
      } else if (type === 2) {
        return '不是会员'
      }else{
        return '超级会员'
      }
    },
    details(id) {
      this.$refs.Details.isDialog = true
    },
    examine(id) {
      alert(`审核${id}`)
    }
  }
}
</script>
<style lang="scss" module>
.header {
  display: flex;
  align-items: center;

  > div {
    flex-grow: 0;
    flex-shrink: 0;

    &:not(:last-child) {
      margin-right: 20px;
    }

    > span {
      margin-right: 5px;
    }
  }

  .search {
    display: flex;
    align-items: center;

    > div {
      width: 200px;
    }
  }

  [space] {
    flex-grow: 1;
  }
}
</style>



